<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}

			.wrap {
				height: 170px;
				width: 490px;
				margin: 60px auto;
				overflow: hidden;
				position: relative;
				margin: 100px auto;
			}

			.wrap ul {
				position: absolute;
			}

			.wrap ul li {
				height: 170px;
			}

			.wrap ol {
				position: absolute;
				right: 5px;
				bottom: 10px;
			}

			.wrap ol li {
				height: 20px;
				width: 20px;
				background: #ccc;
				border: solid 1px #666;
				margin-left: 5px;
				color: #000;
				float: left;
				line-height: center;
				text-align: center;
				cursor: pointer;
			}

			.wrap ol .on {
				background: #E97305;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<div class="wrap" id="wrap">
			<ul id="pic">
				<li><a href="#"><img src="images/1.jpg"></a></li>
				<li><a href="#"><img src="images/2.jpg"></a></li>
				<li><a href="#"><img src="images/3.jpg"></a></li>
				<li><a href="#"><img src="images/4.jpg"></a></li>
				<li><a href="#"><img src="images/5.jpg"></a></li>
			</ul>
			<ol id="list">
				<li class="on">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
			</ol>
		</div>
	</body>
	<script type="text/javascript">
		window.onload = function() {
			var wrap = document.getElementById("wrap");
			pic = document.getElementById("pic").getElementsByTagName("li");
			list = document.getElementById("list").getElementsByTagName("li");
			index = 0;
			timer = null;

			//定义并调用自动播放函数
			timer = setInterval(autoPlay, 1000);

			// 鼠标划过整个容器时停止自动播放
			wrap.onmouseover = function() {
				clearInterval(timer);
			}

			// 鼠标离开整个容器时继续播放至下一张
			wrap.onmouseout = function() {
				timer = setInterval(autoPlay, 1000);
			}

			// 遍历所有数字导航实现划过切换至对应的图片
			for (var i = 0; i < list.length; i++) {
				list[i].onmouseover = function() {
					clearInterval(timer);
					index = this.innerText - 1;
					changePic(index);
				}
			}

			function autoPlay() {
				if (++index >= pic.length) index = 0;
				changePic(index);
			}

			//定义图片切换函数
			function changePic(curIndex) {
				for (var i = 0; i < pic.length; i++) {
					pic[i].style.display = "none";
					list[i].className = "";
				}
				pic[curIndex].style.display = "block";
				list[curIndex].className = "on";
			}
		}
	</script>

</html>
